<template>
  <div id="background">
    <div class="fromNameFrame">
      <div style="width: 60px;">表单名:</div>
      <div v-if="isEdit" class="fromName">
        <div style="margin: 0 10px;">{{ form.form_name }}</div>
        <div class="icon ice-editor" @click="isEdit = false"></div>
      </div>
      <div v-else class="fromName">
        <input type="text" style="margin: ;" v-model="form.form_name">
        <button class="btn bg-blue" @click="changeName">完成</button>
      </div>
    </div>
    <table class="table table-border" style="width: 90%;margin: auto;">
      <thead>
        <tr>
          <th>字段名</th>
          <th>字段类型</th>
          <th>字段描述</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(field, index) in form.fields" :key="index">
          <FormField 
          v-model:field-name="field.field_name" 
          v-model:field-type="field.field_type"
          v-model:field-description="field.field_description">
          </FormField>
        </tr>
      </tbody>
      <div class="btnBox">
        <button class="btn bg-blue" @click="addField">+</button>
        <button class="btn bg-blue" @click="postForm">提交</button>
      </div>
    </table>
  </div>
</template>

<script>
import FormField from "./FormField.vue";
import { postFormApi } from "@/utils/api.js"
import "@/assets/background.css"
export default {
  data() {
    return {
      isEdit: true,
      form: {
        form_name: "Form",
        fields: [
          {
            field_name: "",
            field_type:0,
            field_description: ""
          },
        ]
      },
    };
  },
  methods: {
    changeName() {
      if (this.form.form_name === '') {
        alert("表名不为空！")
        return
      }
      this.form.form_name = this.form.form_name
      this.isEdit = true
    },
    addField() {
      this.form.fields.push({
        field_name: "",
        field_type: 0,
        field_description: ""
      })
      // console.log(this.fieldsData);
    },
    postForm() {
      // console.log(this.form);
      postFormApi(this.form)
    }
  },
  
  components: {
    FormField
  },

};
</script>

<style>
.fromNameFrame {
  width: 90%;
  margin: auto;
  display: flex;
  align-items: center;
  height: 60px;
  font-size: 18px;
}

.fromName {
  position: relative;
  text-align: left;
  height: 35px;
  display: flex;
  line-height: 35px;
}

.ice-editor {
  width: 20px;
}
</style>